<template>
    <!-- 绑定的 -->
    <el-dialog :title="'绑定了代理商的用户'" :close-on-click-modal="false" :visible.sync="visible">
        <!-- 新增和创建表单表单 -->
        <el-table ref="table" v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini"
            highlight-current-row>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="身份：">
                            <span>{{ props.row.isPromoter | filterIsPromoter }}</span>
                        </el-form-item>
                        <el-form-item label="首次访问：">
                            <span>{{ props.row.createTime | filterEmpty }}</span>
                        </el-form-item>
                        <el-form-item label="近次访问：">
                            <span>{{ props.row.lastLoginTime | filterEmpty }}</span>
                        </el-form-item>
                        <el-form-item label="手机号：">
                            <span>{{ props.row.phone | filterEmpty }}</span>
                        </el-form-item>
                        <el-form-item label="标签：">
                            <span>{{ props.row.tagName | filterEmpty }}</span>
                        </el-form-item>
                        <el-form-item label="地址：">
                            <span>{{ props.row.addres | filterEmpty }}</span>
                        </el-form-item>
                        <el-form-item label="备注：" style="width: 100%;display: flex;margin-right: 10px;">
                            <span>{{ props.row.mark | filterEmpty }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <!-- <el-table-column type="selection" width="55">
            </el-table-column> -->
            <el-table-column prop="uid" label="ID" min-width="80" />
            <el-table-column label="头像" min-width="80">
                <template slot-scope="scope">
                    <div class="demo-image__preview">
                        <el-image style="width: 36px; height: 36px" :src="scope.row.avatar"
                            :preview-src-list="[scope.row.avatar]" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="姓名" min-width="160">
                <template slot-scope="scope">
                    <span>{{ scope.row.nickname | filterEmpty }} | {{ scope.row.sex | sexFilter }}</span>
                </template>
            </el-table-column>
            <el-table-column label="代理商" min-width="160">
                <template slot-scope="scope">
                    <span>{{ scope.row.agentName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户等级" min-width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.level | levelFilter | filterEmpty }}</span>
                </template>
            </el-table-column>

            <el-table-column label="手机号" min-width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone | filterEmpty }}</span>
                </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--label="用户类型"-->
            <!--min-width="100"-->
            <!--&gt;-->
            <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.userType | typeFilter}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column prop="nowMoney" label="余额" min-width="100" sortable />
            <el-table-column prop="adminMoney" label="记账额度" min-width="100" sortable />
            <el-table-column prop="integral" label="积分" min-width="100" sortable />
            <el-table-column prop="groupName" label="分组" min-width="100" />
            <el-table-column prop="spreadNickname" label="推荐人" min-width="130" />
            <el-table-column prop="mark" label="备注" min-width="100" />

            <!-- <el-table-column label="操作" min-width="130" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="editUser(scope.row.uid)" size="small"
                        v-hasPermi="['admin:user:infobycondition']">编辑</el-button>
                    
                </template>
            </el-table-column> -->
        </el-table>
        <div class="block">
            <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="dataForm.limit" :current-page="dataForm.page"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
                @size-change="handleSizeChange" @current-change="pageChange" />
        </div>
    </el-dialog>
</template>

<script>
import { userListApi } from '@/api/user'

export default {
    data() {
        return {
            visible: false,
            dataForm: {
                aid: 0,
                page: 1,
                limit: 10,
            },
            tableData: {
                data: [],
                total: 0
            },
            listLoading: false
        }
    },
    filters: {
        sexFilter(status) {
            const statusMap = {
                0: '未知',
                1: '男',
                2: '女',
                3: '保密'
            }
            return statusMap[status]
        }
    },
    created() {
        this.getAgentLevelAll()
    },
    methods: {
        getList() {
            userListApi(this.dataForm).then(res => {
                console.log(res);

                this.tableData.data = res.list
                this.tableData.total = res.total
            }).catch(() => {
            })
        },
        init(id) {
            // 初始化表单验证规则
            this.dataForm.aid = id || 0
            console.log("初始化", this.dataForm.aid);
            this.visible = true
            this.$nextTick(() => {
                this.getList()
            })
        },
        pageChange(page) {
            this.dataForm.page = page
            this.getList()
        },
        handleSizeChange(val) {
            this.dataForm.limit = val
            this.getList()
        },
    }
}
</script>